<template>
	<view class="shop-index">
		<!-- 吸顶 -->
		<u-sticky>
			<view class="shop-xiding">
				<view class="shop-xiding-main">
					<view class="shop-xiding-name" @click="shopXiala">{{shopname}}<u-icon :name="xidingjiantou" size="22px"></u-icon></view>
				</view>
				<view class="shop-xiding-name-list" v-if="shopNameListShow">
					<view v-for="item in shopAllLocationList" :key="item.id" class="shop-xialashuju" @click="getMainDatas(item)">
						<view class="shop-name">{{item.name}}</view>
						<view class="shop-dianpu-neirong">
							<view class="shop-dizhi">{{item.location}}</view>
							<view>｜</view>
							<view>{{item.juli}}公里</view>
						</view>
						<u-divider></u-divider>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="shop-neirong">
			<view class="shop-lunbotu">
				<u-swiper :list="lunboList" circular height=180 interval=5000 radius=10 @click="getLunboTu"></u-swiper>
			</view>
			<view class="shop-cnxh">
				<view class="shop-cnxh-text">—— 猜你喜欢 ——</view>
				<view class="shop-cnxh-nr">
					<view v-for="(listItem,listIndex) in shopLikedatas" :key="listItem.id" class="index-cnxh-zhu">
						<view class="index-cnxh-body">
							<u--image :showLoading="true" :src="listItem.img" width="320rpx" height="180px" radius="10px 10px 0 0" @click="commodityClick(listItem)"></u--image>
							<view class="index-shop-name">{{listItem.name}}</view>
							<view class="index-shop-money"><text class="index-shop-money-text">¥</text>{{listItem.money}}</view>
							<view class="index-shop-store">{{listItem.store}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<u-overlay :show="zzshow" @click="shopXiala" zIndex="800" opacity="0.3"></u-overlay>
	</view>
</template>

<script>
	import configData from "@/static/indexdata.js"
	export default {
		data() {
			return {
				// 箭头图标
				xidingjiantou:'arrow-down',
				// 下拉是否显示
				shopNameListShow:false,
				// 遮罩是否显示
				zzshow:false,
				shopAllLocationList:[],
				shopname:'湖州浙北大厦购物中心',
				lunboList:[],
				shopLikedatas:[]
			}
		},
		onPullDownRefresh(){
			console.log("下拉！！");
		},
		// 触底的事件，上拉加载
		onReachBottom() {
			console.log("上拉！！");
			// 模拟上拉请求数据
			let listlen = this.shopLikedatas.length;
			let xxlist = [
			{
				id:listlen+1,
				img:"https://ts1.cn.mm.bing.net/th/id/R-C.91eff5271fee468e4d9f36fecf48b343?rik=zuuIEUgd0LFOIw&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2fefa6819f2de8231afcb8d12890bf7b1655d0b0fe.jpg&ehk=WV22cB90Ve4g4fYs1gutrWiYG52SI7JyNGGzmJKjcmM%3d&risl=&pid=ImgRaw&r=0",
				type:0,
				url:'',
				data:'',
				money:'121',
				store:'湖州浙北大厦购物中心',
				name:'笔记本电脑'
			},
			{
				id:listlen+2,
				img:"https://img.sj33.cn/uploads/allimg/201006/29-1.jpg",
				type:0,
				url:'',
				data:'',
				money:'149',
				store:'南浔浙北大厦购物中心',
				name:'身体乳'
			},{
				id:listlen+3,
				img:"https://ts1.cn.mm.bing.net/th/id/R-C.91eff5271fee468e4d9f36fecf48b343?rik=zuuIEUgd0LFOIw&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2fefa6819f2de8231afcb8d12890bf7b1655d0b0fe.jpg&ehk=WV22cB90Ve4g4fYs1gutrWiYG52SI7JyNGGzmJKjcmM%3d&risl=&pid=ImgRaw&r=0",
				type:0,
				url:'',
				data:'',
				money:'121',
				store:'湖州浙北大厦购物中心',
				name:'笔记本电脑'
			},
			{
				id:listlen+4,
				img:"https://img.sj33.cn/uploads/allimg/201006/29-1.jpg",
				type:0,
				url:'',
				data:'',
				money:'149',
				store:'南浔浙北大厦购物中心',
				name:'身体乳'
			}
		]
		this.shopLikedatas.push.apply(this.shopLikedatas, xxlist)
		
		},
		onLoad(){
			this.getShopAllLocationList();
			this.getMainDatas();
		},
		methods: {
			// 遮罩和下拉数据显示和隐藏
			shopXiala(){
				if(this.xidingjiantou == 'arrow-up'){
					this.xidingjiantou = 'arrow-down'
					this.shopNameListShow = false
					this.zzshow = false
				}else{
					this.xidingjiantou = 'arrow-up'
					this.shopNameListShow = true
					this.zzshow = true
				}
				
			},
			// 获取下拉列表数据
			getShopAllLocationList(){
				let datas = configData.shopAllLocationList;
				// 获取当前位置
				let mylongitude = uni.getStorageSync("longitude")
				let mylatitude = uni.getStorageSync("latitude")
				let newList = []
				for(let index in datas){
					let ll = datas[index].longitude
					let tt = datas[index].latitude
					// 计算距离
					let juli = this.getDistance({'latitude':mylatitude, 'longitude':mylongitude}, {'latitude':tt, 'longitude':ll})
					datas[index]['juli'] = juli
				}
				this.shopAllLocationList = datas;
			},
			// 获取距离
			getDistance(latlng1, latlng2) {
			    let lat1 = latlng1.latitude;
			    let lng1 = latlng1.longitude;
			    let lat2 = latlng2.latitude;
			    let lng2 = latlng2.longitude;
			    var radLat1 = (lat1 * Math.PI) / 180.0;
			    var radLat2 = (lat2 * Math.PI) / 180.0;
			    var a = radLat1 - radLat2;
			    var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			    s = s * 6378.137; // EARTH_RADIUS;
			    s = Math.round(s * 10000) / 10000;
			    return Number(s.toFixed(2));
			},
			// 获取主数据
			getMainDatas(item={}){
				// 这里本来是根据不同店铺刷不同的数据，不过偷懒了只是修改数据里店铺名
				this.getShopLikedatas(item);
				// 这里有两种情况，一个是初始化数据，一个是选择店铺以后更新相应的数据
				if(Object.keys(item).length > 0){
					this.shopname = item.name;
					this.shopXiala();
				}
				// 获取轮播广告（这里随便弄了一个数据结构，以店铺名为key的map，这样可以根据店铺名刷不同轮播图）
				let datas = configData.shopSwiperImg;
				let newlist = []
				for(let index in datas[this.shopname]){
					newlist.push(datas[this.shopname][index].img)	
				}
				this.lunboList = newlist;
			},
			// 获取猜你喜欢数据
			getShopLikedatas(item={}){
				//假装根据不同店铺换数据，其实就是修改一下店铺名称
				let olddatas = configData.shopLikedatas
				// 这里有两种情况，一个是初始化数据，一个是选择店铺以后更新相应的数据
				if(Object.keys(item).length > 0){
					for(let index in olddatas){
						olddatas[index].store = item.name
					}
				}
				this.shopLikedatas = olddatas;
			},
			// 轮播图点击跳转H5页面
			getLunboTu(index){
				let datas = configData.shopSwiperImg[this.shopname];
				let url = datas[index]['url'];
				uni.navigateTo({
					url: '/pages/webview/webview?url='+url
				});
			},
			commodityClick(item){
				console.log(item.id)
				uni.navigateTo({
					url:"../commodity/commodity?id="+item.id
				});
			}
		}
	}
</script>

<style>
	.shop-index{
		background-color: #F5F5F5;
	}
	.shop-xiding{
		z-index: 999;
	}
	.shop-xiding-main{
		height: 190rpx;
		background-color: #F5F5F5;
	}
	.shop-xiding-name{
		width: 60%;
		position: absolute;
		top:120rpx;
		font-size: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		margin-left: 20rpx;
	}
	.shop-xiding-name-list{
		width: 100%;
		background-color: white;
		/* 绝对定位，不然元素出现会挤掉下面的元素 */
		position: absolute;
		background-color: #F5F5F5;
		border-radius:0 0 36rpx 36rpx;	
	},
	.shop-dianpu-neirong{
		display: flex;
		flex-direction: row;
		color: #787878;
	}
	.shop-xialashuju{
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.shop-name{
		font-size: 40rpx;
		font-weight:400;
	}
	.shop-dizhi{
		font-size: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		width: 40%;
	}
	.shop-neirong{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.shop-lunbotu{
		width: 90%;
	}
	.shop-cnxh{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 94%;
	}
	.shop-cnxh-nr{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	.index-cnxh-zhu{
		border-radius:20rpx;
		background-color: white;
		margin-bottom: 20rpx;
		width: 320rpx;
	}
	.index-cnxh-body{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		height: 480rpx;
		padding-bottom: 10px;
	}
	.index-cnxh-body >>> .u-image__image{
		position: absolute;
		top:-9rpx
	}
	.index-shop-store{
		font-size: 10px;
		color: #787878;
	}
	.index-shop-money-text{
		font-size: 20rpx;
	}
	.index-shop-money{
		font-size: 36rpx;
		font-weight:900;
		/* margin-bottom: 4rpx; */
	}
	.index-shop-name{
		margin-bottom: 4rpx;
		/* margin-bottom: 4rpx;
		margin-top: 4rpx; */
	}
	.shop-cnxh-text{
		font-size: 40rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
